<style lang="less">
    @import '../../styles/common.less';
    @import './goodspage.less';
</style>

<template>
    <div class="preview-main">
        <Row style="padding-top:50px">
            <Col span="12" offset="5">
                <div>
                    <Card>
                        <h1>{{ goods.goodsName }}</h1>
                        <p class="preview-publish-time"><Icon type="android-alarm-clock"></Icon>&nbsp;时间：{{ goods.ctime }}</p>
                        <div class="preview-tags-con">
                            <b class="preview-tip"><Icon type="ios-pricetags-outline"></Icon>&nbsp;关键字：</b><Tag v-for="item in tagsList" type="border" color="blue" :key="item">{{ item }}</Tag>
                        </div>
                        <div class="preview-content-con" v-html="goods.goodsDesc"></div>
                        <div class="preview-classifition-con">
                            <b class="preview-tip"><Icon type="navicon-round"></Icon>&nbsp;分类：</b>
                            <a class="preview-classifition-item">
                                <Icon type="android-folder-open"></Icon>
                                {{ goods.catName }}
                            </a>
                        </div>
                    </Card>
                </div>
            </Col>
            <Col span="4" class="padding-left-10">
                <div >
                    <Card>
                        <p slot="title">
                            <Icon type="paper-airplane"></Icon>
                            商品图片
                        </p>
                        <div class="preview-placeholderCon" style="height: auto;">
                            <img style="width: 100%;height: auto;" :src="goods.goodsThumb">
                        </div>
                    </Card>
                </div>
                <div class="margin-top-10">
                    <Card>
                        <p slot="title">
                            <Icon type="paper-airplane"></Icon>
                            售价
                        </p>
                        <div class="preview-placeholderCon" style="height: auto;">
                            <div class="preview-placeholder" style="text-align:center">
                              <span style="font-size:26px;line-height:40px">市场价：<p style="display:inline;text-decoration: line-through;">{{goods.marketPrice}}￥</p></span>
                            </div>
                            <div class="preview-placeholder" style="text-align:center">
                              <span style="font-size:26px;line-height:40px">售价：<p style="display:inline">{{goods.shopPrice}}￥</p></span>
                            </div>
                        </div>
                    </Card>
                </div>
            </Col>
        </Row>
    </div>
</template>

<script>
export default {
    data () {
        return {
            goods: {},
            tagsList:[]
        };
    },
    mounted () {
      this.goods = this.$route.query;
      if (this.goods.keywords != undefined) {
        this.tagsList = this.goods.keywords.split(',');
      }
    },
    watch: {
        '$route' () {
            this.init();
        }
    }
};
</script>
